<template>
  <div>
    <el-dialog
      v-bind="$attrs"
      v-on="$listeners"
      @open="onOpen"
      @close="onClose"
      title="自定义通知"
      :close-on-click-modal="false"
    >
      <el-form
        ref="elForm"
        :model="formData"
        :rules="rules"
        label-width="120px"
      >
        <el-form-item label="名称" prop="name">
          <el-input
            v-model="formData.name"
            placeholder="请输入名称"
            clearable
            :style="{ width: '100%' }"
          ></el-input>
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input
            v-model="formData.description"
            placeholder="请输入描述"
            clearable
            :style="{ width: '100%' }"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="类型" prop="type_id">
          <el-radio-group v-model="formData.type_id">
            <el-radio
              v-for="(item, index) in type_idOptions"
              :key="index"
              :label="item.value"
              :disabled="item.disabled"
              >{{ item.label }}</el-radio
            >
          </el-radio-group>
        </el-form-item>
        <el-form-item label="hook url" prop="hook_url">
          <el-input
            v-model="formData.hook_url"
            placeholder="请输入hook url"
            clearable
            :style="{ width: '100%' }"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="hook token" prop="hook_token">
          <el-input
            v-model="formData.hook_token"
            placeholder="请输入hook token"
            clearable
            :style="{ width: '100%' }"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="close" size="small">取消</el-button>
        <el-button type="primary" @click="handelConfirm" size="small"
          >确定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import noticesManagement from "@/api/noticesManagement/index";
export default {
  inheritAttrs: false,
  components: {},
  props: {
    row: {
      type: Object,
      defult: function() {
        return {};
      }
    }
  },
  data() {
    return {
      formData: {
        name: "",
        description: undefined,
        type_id: undefined,
        hook_url: undefined,
        hook_token: undefined
      },
      rules: {
        name: [
          {
            required: true,
            message: "请输入名称",
            trigger: "blur"
          }
        ],
        description: [],
        type_id: [
          {
            required: true,
            message: "类型不能为空",
            trigger: "change"
          }
        ],
        hook_url: [
          {
            required: true,
            message: "请输入hook url",
            trigger: "blur"
          }
        ],
        hook_token: [
          {
            required: true,
            message: "请输入hook token",
            trigger: "blur"
          }
        ]
      },
      type_idOptions: [
        {
          label: "hook",
          value: 1
        },
        {
          label: "站内消息",
          value: 2
        }
      ]
    };
  },
  computed: {},
  watch: {},
  created() {
    this.formData = { ...this.row };
  },
  mounted() {},
  methods: {
    onOpen() {},
    onClose() {
      this.$refs["elForm"].resetFields();
    },
    close() {
      this.$emit("update:visible", false);
    },
    handelConfirm() {
      this.$refs["elForm"].validate(valid => {
        if (!valid) return;
        if (this.formData.id) {
          let form = {};
          form.name = this.formData.name;
          form.description = this.formData.description;
          form.type_id = this.formData.type_id;
          form.hook_url = this.formData.hook_url;
          form.hook_token = this.formData.hook_token;
          noticesManagement
            .editCustomNotices(this.formData.id, form)
            .then(res => {
                this.msgSuccess("添加成功!");
                this.$emit("reloadList");
                this.close();
            });
        } else {
          noticesManagement.addCustomNotices(this.formData).then(res => {
              this.msgSuccess("添加成功!");
              this.$emit("reloadList");
              this.close();
          });
        }
      });
    }
  }
};
</script>
<style></style>
